<template>
	<view class="pag">
		<view class="search_top">
			<view class="inp">
				<input type="text" 
				placeholder="请输入您的需求" 
				placeholder-class="place"
				v-model="search"
				@focus="search_flag=true"
				@blur="search_flag=false"
				 />
				<i class="icon">&#xe647;</i>
			</view>
			<view class="btn" v-if="search_flag" @click="toserarchresult">
				搜索
			</view>
		</view>
		<!-- 历史搜索 -->
		<view class="search_history">
			<span>历史搜索</span>
			<view class="delet">
				<i class="icon">&#xe63f;</i>
				清除记录
			</view>
		</view>
		<view class="history_item">
			<span v-for="(item,index) in list ">{{item}}</span>
			<!-- <span>马拉松跑</span>
			<span>马拉松跑</span>
			<span>马拉松跑</span> -->
		</view>
		<!-- 热门搜索 -->
<!-- 		<view class="search_hot">
			热门搜索
		</view>
		<view class="search_hot_tit">赛事活动</view>
		<view class="search_hot_tit">赛事活动</view>
		<view class="search_hot_tit">赛事活动</view>
		<view class="search_hot_tit">赛事活动</view> -->
	</view>
</template>

<script>
	export default {
		data () {
			return {
				search_flag:false,
				list:[],
				search:'',
			}
		},
		methods: {
			toserarchresult() {
				if (!this.search) {
				// uni.showToast({
				// 	icon:'none',
				//     title: '请输入搜索内容',
				//     duration: 2000
				// });
				this.toast('请输入搜索内容')
					return false
				}
				 // console.log (this.search)
				this.list.unshift(this.search)
				this.search =''
			}
		}
	}
</script>

<style lang="less" scoped>
	.pag {
		padding: 20upx;
		box-sizing: border-box;
	}
	.search_top {
		display: flex;
		.inp {
			flex: 1;
			position: relative;
			input {
				width: 100%;
				height: 66upx;
				padding-left: 55upx;
				box-sizing: border-box;
				background-color: #F2F2F2;
				border-radius: 33upx;
			}
			.icon {
				font-size: 36upx;
				height: 36upx;
				color: #e1e1e1;
				position: absolute;
				top: 50%;
				transform: translate(15upx,-55%);
			}
		}
		.btn {
			width: 100upx;
			height: 64upx;
			border-radius: 10upx;
			margin-left: 30upx;
			background-color: #8839d3;
			color: #FFFFFF;
			font-size: 32upx;
			line-height: 64upx;
			text-align: center;
		}
	}
	.search_history {
		display: flex;
		width: 100%;
		height: 50upx;
		align-items: center;
		justify-content: space-between;
		margin-top: 30upx;
		span {
			display: block;
			height: 40upx;
			color: #333333;
			font-weight: bold;
			font-size: 32upx;
			
		}
		.delet {
			display: flex;
			align-items: center;
			font-size: 24upx;
			color: #999999;
			font-weight: 400;
			.icon {
				font-size: 24upx;
				height: 24upx;
			}
			span {
				font-size: 24upx;
				color: #999999;
				font-weight: 400;
			}
		}
	}
	.history_item {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20upx;
		span {
			height: 54upx;
			padding: 0 30upx;
			font-size: 24upx;
			line-height: 50upx;
			box-sizing: border-box;
			border: 2upx solid #e1e1e1;
			border-radius: 25upx;
			margin-bottom: 20upx;
			margin-right: 20upx;
			color: #666666;
		}
	}
	.search_hot {
		font-size: 36upx;
		color: #333333;
		margin: 30upx 0;
		}
	.search_hot_tit {
			height: 80upx;
			font-size: 28upx;
			color: #666;
			line-height: 80upx;
			border-bottom: 2upx solid #e1e1e1;
		}
		.search_hot_tit:last-child {
			border: 0;
		}
</style>
